<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Base64编解码 - 在线工具箱</title>
    <link rel="stylesheet" href="base64-style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header>
            <a href="/" class="back-link"><i class="fas fa-arrow-left"></i> 返回工具箱</a>
            <h1><i class="fas fa-key"></i> Base64 编解码</h1>
            <p>对文本或文件进行Base64编码和解码</p>
        </header>

        <main>
            <div class="coder-panel">
                <div class="text-panel">
                    <h3>原始文本 (UTF-8)</h3>
                    <textarea id="plainText" placeholder="在此输入或粘贴要编码的文本..."></textarea>
                </div>
                <div class="swap-icon">
                    <i class="fas fa-exchange-alt"></i>
                </div>
                <div class="text-panel">
                    <h3>Base64 编码</h3>
                    <textarea id="base64Text" placeholder="在此输入或粘贴要解码的Base64字符串..."></textarea>
                </div>
            </div>
            <div class="actions">
                <button id="encodeBtn"><i class="fas fa-arrow-right"></i> 编码</button>
                <button id="decodeBtn"><i class="fas fa-arrow-left"></i> 解码</button>
                <button id="clearBtn"><i class="fas fa-trash"></i> 清空</button>
            </div>
            
            <div class="file-section">
                <h3>文件转 Base64</h3>
                <div class="file-drop-area" id="fileDropArea">
                    <p>拖拽文件到这里，或 <label for="fileInput">点击选择文件</label></p>
                    <input type="file" id="fileInput" hidden>
                </div>
                <div class="file-info" id="fileInfo"></div>
            </div>
            
            <div class="image-preview-section" id="imagePreviewSection" style="display: none;">
                <h3>Base64 解码图片预览</h3>
                <div class="image-container">
                    <img id="decodedImage" src="" alt="Decoded Image">
                </div>
                <a id="downloadImageBtn" class="button" href="#" download="decoded_image.png">下载图片</a>
            </div>
        </main>
    </div>
    <script src="base64-script.js"></script>
</body>
</html> 